<template>
  <div class="container">
    <div :class="['sidebar', { collapsed: isCollapsed }]" id="sidebar">
      <div class="sidebar-content">
        <div class="toggle-container">
          <button class="toggle-btn" @click="toggleSidebar">≡</button>
        </div>
        <div>
          <div class="icon" v-show="!isCollapsed">
            <img src="../assets/logo2.png" alt="Logo" style="width: 40%">
          </div>
          <div class="name" v-show="!isCollapsed">AIToEdu</div>
          <div class="statistics" v-show="!isCollapsed">
            <div>
              <strong>207w</strong>
              使用次数</div>
            <div>
              <strong>27w</strong>
              帮助人数</div>
          </div>
          <div class="buttons" v-show="!isCollapsed">
            <el-button>智慧问答</el-button>
          </div>
          <div class="buttons" v-show="!isCollapsed">
            <el-button>难点定位</el-button>
          </div>
        </div>
      </div>
      <div>
        <el-divider
          v-show="!isCollapsed"
        ></el-divider>
        <div class="mobile-version" v-show="!isCollapsed">
          <button>体验手机版</button>
        </div>
      </div>
    </div>

    <div class="chatbox">
      <div class="chat-header">
        <img src="../assets/svg/aiteacher/clear-dialog.svg">
        <img src="../assets/svg/aiteacher/new-dialog.svg">
        <img src="../assets/svg/aiteacher/history-dialog.svg">
      </div>
      <div class="dialog">
        <div class="assistant-message">
          <p>您好！我是智教助手，利用AI技术为您提供专业、高效的教育服务。请问有什么学习需求，我可以帮您解答或协助解决吗？</p>
          <div class="options">
            <button>介绍编程语言基础课程</button>
            <button>如何学习算法</button>
          </div>
        </div>
        <div class="user-message-placeholder">
          <input type="text" placeholder="点击登录既可体验智慧问答">
          <button>发送</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const isCollapsed = ref(false)

const toggleSidebar = () => {
  isCollapsed.value = !isCollapsed.value
}
</script>

<style scoped>

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.container {
  display: flex;
  width: 100%;
  height: 100%;
}

.sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 350px;
  height: 780px;
  background-color: #F6FBFF;
  padding: 20px;
  text-align: center;
  transition: width 0.3s ease;
}

.sidebar .sidebar-content {
  display: flex;
  flex-direction: column;
  gap: 100px;
}

.sidebar.collapsed {
  width: 25px;
}
.sidebar .icon img {
  width: 100px;
  height: auto;
  margin-bottom: 10px;
}

.sidebar .toggle-container {
  align-self: flex-end;
}

.sidebar .name {
  font-size: 1.2em;
  color: #409eff;
  font-weight: bold;
  display: block;
}

.sidebar .statistics {
  align-content: center;
  width: 80%;
  display: flex;
  gap: 20px;
  font-size: 0.8em;
  margin: 5px 25%;
}

.sidebar .buttons {
  margin-top: 20px;
}

.sidebar .buttons button {
  display: block;
  width: 60%;
  height: 60px;
  margin: 10px auto;
  padding: 10px;
  border: none;
  border-radius: 20px;
  background-color: #E7F3FD;
  color: #409eff;
  cursor: pointer;
}

.sidebar .mobile-version {
  margin-top: 20px;
}

.sidebar .mobile-version button {
  display: block;
  width: 80%;
  margin: 10px auto;
  padding: 10px;
  border: none;
  border-radius: 20px;
  background-color: #ffffff;
  color: #A6A6A6;
  cursor: pointer;
}

.chatbox {
  width: calc(100% - 250px);
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
  position: relative;
}

.chatbox .chat-header {
  height: 5%;
  display: flex;
  justify-content: flex-end;
  gap: 40px;
}

.chatbox .chat-header img{
  display: block;
}

.chatbox .dialog {
  height: 95%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.assistant-message {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid #409eff;
  margin-bottom: 20px;
  margin-top: 15px;
  position: relative;
}

.assistant-message::before {
  content: '';
  position: absolute;
  left: 20px;
  bottom: -10px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #409eff;
}

.assistant-message p {
  margin: 0 0 20px 0;
}

.assistant-message .options button {
  display: block;
  width: 100%;
  padding: 10px;
  border: none;
  background-color: #E7F3FD;
  color: #409eff;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 10px;
  text-align: left;
}

.user-message-placeholder {
  display: flex;
  align-self: center;
  background-color: white;
  padding: 10px;
  border-radius: 20px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  bottom: 20px;
  z-index: 1000;
  width: 60%;
}

.user-message-placeholder input {
  flex: 1;
  border: none;
  padding: 10px;
  border-radius: 20px;
  outline: none;
}

.user-message-placeholder button {
  border: none;
  background-color: #409eff;
  color: white;
  padding: 10px 20px;
  border-radius: 20px;
  margin-left: 10px;
  cursor: pointer;
}
.toggle-btn {
  background-color: transparent;
  border: none;
  font-size: 2em;
  cursor: pointer;
  margin-bottom: 20px;
}

.sidebar .icon,
.sidebar .name,
.sidebar .buttons,
.sidebar .mobile-version {
  display: block;
}

.sidebar.collapsed .icon,
.sidebar.collapsed .name,
.sidebar.collapsed .buttons,
.sidebar.collapsed .mobile-version {
  display: none;
}
</style>
